<template>
  <div class="login">
    <el-form class="form" :model="form" ref="formRef" label-width="auto" :rules="rules">
      <el-form-item label="账号">
        <el-input v-model="form.account" size="large" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" size="large" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <div class="code">
          <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
          <img :src="captchaUrl" width="100" height="40" @click="getCaptcha" />
        </div>
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="login()">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import userAPI from '@/api/user.js';

const router = useRouter();

const rules = {
  account: [{ required: true, message: '请输入账户', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
};
const form = reactive({
  account: '',
  password: '',
  code: '',
  verifyCodeKey: ''
});

const formRef = ref(null);
function login() {
  formRef.value.validate((valid) => {
    if (valid) {
      localStorage.setItem('token', form.account);
      router.replace({
        path: '/home'
      });
    }
  });
}



const captchaUrl = ref('');
function getCaptcha() {
  userAPI.captcha().then((res) => {
    captchaUrl.value = res.bin;
    form.verifyCodeKey = res.key;
  });
}
getCaptcha();
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .form{
    box-shadow: 0px 0px 43px 0px rgba(0,35,136,0.1);;
    padding: 20px;
    border-radius: 2px;
  }

  .code{
    display: flex;
    gap: 10px;
    >img{
      cursor: pointer;
    }
  }
}
</style>
